<script setup>
	import {
		ref,
		reactive,
		toRefs,
		defineEmits,
	} from 'vue'
	import {
		Search
	} from '@element-plus/icons-vue'

	const props = defineProps({
		show: {
			type: Boolean,
			required: true,
			default: false
		}
	})

	const emits = defineEmits(['update:show', 'submit'])
	let {
		show
	} = toRefs(props)

	const tableData = ref([{
		name: 'mzlhskj.cn',
		registrar: '190vip'
	}, {
		name: 'lrdspt.cn',
		registrar: 'ename'
	}, {
		name: 'bjfyhtshop.cn',
		registrar: 'xw'
	}, {
		name: '0731s.cn',
		registrar: '190vip'
	}, {
		name: 'zmxuan2.cn',
		registrar: '190vip'
	}])
	const multipleSelection = ref([])
	const total = ref(86)
	const domainform = reactive({})
	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"
	const dmName = ref(false)

	const options = ref([{
		label: '模版一',
		value: 1
	}, {
		label: '模版一',
		value: 2
	}, {
		label: '未设置模版',
		value: 0
	}])

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}
	const domainBack = () => {
		emits('update:show', false)
	}

	const domainSelect = () => {
		let arr = multipleSelection.value.map(item => item.name)
		emits('submit', arr)
	}

	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}
</script>
<template>
	<div>
		<el-dialog :modelValue="show" width="520">
			<template #header>
				<div class="dialog-header">
					<span class="dialog-title">选择域名</span>
				</div>
			</template>
			<div class="domains-form">
				<span class="label">快速查找</span>
				<div class="wrapdmTextarea">
					<div class="textarea-warp" style="z-index: 200; top: 0;">
						<div class="textarea-suffix">
							<img src="@/assets/img/search.png" alt="" />
						</div>
						<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
							@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''" style="overflow-y: auto;"
							v-model="domainform.nameStr"></textarea>
					</div>
				</div>
				<el-select v-model="domainform.template" placeholder="选择域名模板" style="width: 200px">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="domains-table">
				<div class="table-tool">
					<div class="tool-left">搜索结果共{{total}}条，已选择{{multipleSelection.length}}条。</div>
				</div>
				<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
					style="width: 100%" show-overflow-tooltip>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="name" label="域名">
					</el-table-column>
					<el-table-column prop="registrar" label="注册商">
					</el-table-column>
				</el-table>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="domainBack" class="btn-default">返 回</el-button>
					<el-button type="warning" @click="domainSelect">
						选 择
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>


<style scoped lang="scss">
	.textarea-box {
		width: 100%;
		height: 102px;
	}


	.textarea-limit {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.dmTextarea.dmTyping {
		height: 100px;
	}

	.textarea-tip {
		color: #999;
		margin-top: 10px;
	}

	.form-column {
		flex-direction: column;
		justify-content: flex-start;
	}

	.domain-select .el-button {
		vertical-align: baseline;
		color: rgb(0, 0, 255) !important;
	}

	.domain-select .el-button:hover {
		text-decoration: underline;
	}

	.form-submit .el-button {
		width: 140px;
	}

	.domain-num {
		vertical-align: baseline;
		color: rgb(0, 0, 255);
	}

	.transfer-form .form-item {
		display: flex;
		margin-bottom: 20px;
	}

	.form-item-label {
		width: 70px;
		line-height: 32px;
	}

	.form-item-content {
		flex: 1;
		min-width: 0;
	}


	.domains-form {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.label {
			width: 70px;
		}

		.wrapdmTextarea {
			width: 200px;
			margin-right: 14px;
		}
	}

	.domains-table {
		.table-tool {
			padding-bottom: 10px;
		}
	}

	.dialog-header {
		color: #999;
		font-size: 12px;

		.dialog-title {
			font-size: 14px;
			font-weight: 700;
			color: #333;
			margin-right: 15px;
		}
	}
</style>